<template>
  <uv-popup
		ref="previewPopup"
		mode="bottom"
		bgColor="transparent"
		:closeOnClickOverlay="true"
		:safeAreaInsetBottom="false"
    @close="close"
  >
    <view class="params-preview-main">
      <view class="params-preview-content">
        <view class="params-preview-header">
          <text class="title">{{ title }}</text>
          <image
            class="icon-close"
            src="https://s1.huishoubao.com/static/wechatMini/icon_close.png"
            @click="close"
          ></image>
        </view>
        <view class="params-preview-body">
          <swiper
            v-if="list.length"
            ref="paramsPreviewSwiper"
            class="params-preview-swiper"
						:current="active"
						:autoplay="false"
						:circular="false"
						:indicator-dots="false"
            @change="change"
          >
            <swiper-item
              v-for="(item, index) in list"
              :key="index"
            >
              <view class="params-preview-swiper-item">
                <view class="params-preview-swiper-image">
                  <image
                    v-if="item.img"
										mode="widthFix"
                    class="icon-swiper-image"
                    :src="'https://s1.huishoubao.com/img/phone/' + item.img"
                  ></image>
                  <text v-else>暂无图片</text>
                </view>
                <view class="params-preview-swiper-desc-body">
                  <view class="params-preview-swiper-desc">{{ item.desc || '' }}</view>
                </view>
              </view>
            </swiper-item>
          </swiper>
          <view class="swiper-indicator-dots">
            <view
              v-for="(item, index) in list"
              :key="index"
              class="swiper-indicator-item"
              :class="{
                active: index === active
              }"
            />
          </view>
        </view>
      </view>
    </view>
  </uv-popup>
</template>

<script>
export default {
  props: {
    show: Boolean,
    info: Object
  },
  computed: {
    title () {
      return (this.list[this.active] || {}).name || this.info.name || ''
    },
    list () {
      const courseList = []
      const steps = this.info.step || []
      steps.forEach(item => {
        const images = item.pic || []
        if (images.length > 0) {
          images.forEach(child => {
            courseList.push({
              ...item,
              img: child
            })
          })
        } else {
          courseList.push({ ...item })
        }
      })
      return courseList
    }
  },
  data () {
    return {
      active: 0
    }
  },
  methods: {
		open () {
			this.active = 0
			this.$refs.previewPopup.open()
		},
		close () {
			this.$refs.previewPopup.close()
		},
    change (event) {
      this.active = event.detail.current
    }
  }
}
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>